<div class="carousel-title">
        <span>{{ '合作品牌' }}</span>
</div>
<div class="swiper-viewport">
    <div id="carousel{{ module }}" class="swiper-container">
        <div class="swiper-wrapper">
            {% for banner in banners %}
                <div class="swiper-slide text-center">
                    {% if banner.link %}
                        <a href="{{ banner.link }}">
                            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive"/>
                        </a>
                    {% else %}
                        <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive"/>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<script type="text/javascript"><!--
    $('#carousel{{ module }}').swiper({
        mode: 'horizontal',
        slidesPerView: 5,
        pagination: '.carousel{{ module }}',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoplay: 2500,
        loop: true
    });
    --></script>
{#<div class="carousels">#}
    {#<div class="title">#}
        {#<span>{{ '蝦皮商城' }}</span>#}
    {#</div>#}
    {#<div class="carousel-box">#}
        {#<div class="list-box">#}
            {#{% for banner in banners %}#}
                {#<div class="carousel-list">#}
                    {#{% if banner.link %}#}
                        {#<a href="{{ banner.link }}">#}
                            {#<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive"/></a>#}
                    {#{% else %}#}
                        {#<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />#}
                    {#{% endif %}#}
                {#</div>#}
            {#{% endfor %}#}
        {#</div>#}
    {#</div>#}
{#</div>#}